@import '../../scss_variables.scss';

.QueryViewReview {
    margin: 16px 0;
    padding: 16px;

    .Card {
        background: var(--bg);
        border-radius: var(--border-radius);
        transition: box-shadow 0.2s ease;

        &:hover {
            box-shadow: var(--shadow);
        }
    }

    .review-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        cursor: default;

        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;

            .header-label {
                min-width: 160px;
            }

            .StatusIcon {
                cursor: default;
            }
        }

        .Tag {
            cursor: default;
        }
    }

    .review-content {
        .content-row {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-bottom: 16px;

            .content-item {
                display: flex;
                align-items: center;
                gap: 8px;
            }
        }

        .justification {
            margin: 12px 0;

            .request-reason {
                width: 100%;
                background: var(--bg-light);
                padding: 12px;
                border-radius: var(--border-radius);
                line-height: 1.6;
                font-size: var(--text-size);
                color: var(--text);
                border: 1px solid var(--border-light);
            }
        }
    }

    .review-actions {
        margin-top: 16px;

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
    }

    .reject-form-container {
        padding: 16px;

        .reject-form {
            display: flex;
            flex-direction: column;
            gap: 16px;

            textarea {
                background: var(--bg-light);
                border: 1px solid var(--border-light);
                border-radius: var(--border-radius);
                min-height: 120px;
                width: 100%;
                resize: vertical;
                padding: 12px;
                font-size: var(--text-size);
                color: var(--text);
            }

            .form-buttons {
                display: flex;
                justify-content: flex-end;
                gap: 8px;
                margin-top: 8px;
            }
        }
    }

    .review-notifier,
    .outcome-msg {
        margin-top: 16px;
        border-radius: var(--border-radius);

        &.error {
            background-color: var(--bg-error-light);
            border-left: 4px solid var(--color-error);
        }

        .message-note {
            font-style: italic;
            color: var(--text-light);
            margin-top: 8px;
        }

        .status-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-details {
            display: flex;
            flex-direction: column;
            gap: 16px;

            .reviewer-info {
                display: flex;
                align-items: center;
                gap: 8px;
            }
        }
    }

    .Modal {
        .form-buttons {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
    }

    .review-content-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }
}

.Button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.approve-message {
    white-space: pre-wrap;
    line-height: 1.6;
}
